<template lang="pug">
.shopList
  el-button(type="primary" size="mini" @click="shopAdd" v-p="['shop.category.create']") + 添加
  el-table(border style="width: 100%" :data="list" v-loading="loading" v-if='s')
    el-table-column(prop="id" label="ID" width="150")
    el-table-column(prop="name" label="分类名称" width="150")
    el-table-column(label="分类标签" width="150")
      template(slot-scope="scope" v-if='scope.row.tag')
        el-tag(size="medium" type="info") {{ scope.row.tag }}
      span(v-else)
    el-table-column(prop="desc" label="分类描述" width="150")
    el-table-column(prop='id' label="展示顺序" width="150")
    el-table-column(label="操作")
      template(slot-scope="scope")
        el-button(type="info" size="mini" @click="onPlus(scope)" :disabled="!scope.$index" v-p="['shop.category.order']")
          i.el-icon-caret-top
        el-button(type="info" size="mini" @click="onReduce(scope)" :disabled="scope.$index === list.length-1" v-p="['shop.category.order']")
          i.el-icon-caret-bottom
        el-button(type="primary" size="mini" @click="onEdit(scope.row)" v-p="['shop.category.update']") 编辑
        el-button(type="danger" size="mini" @click="onDelete(scope.row.id)" v-p="['shop.category.delete']") 删除
  shop-add(v-model="show" @yes="onYes" :role="role" @edit="onedit")

</template>
<script>
import ShopAdd from '@/components/shop/ShopAdd.vue'
export default {
  data() {
    return {
      list:[],
      show: false,
      role:{},
      loading:false,
      s:true
    }
  },
  components: {
    ShopAdd
  },
  created() {
    this.data()
    this.axios.get('/category/detail',{
      params:{id:11}
    }).then(({data}) => {
      console.log(data);
    })
  },
  methods: {
    data() {
      this.axios.get('/category/list').then(({data}) => {
        console.log(data);
        this.list = data.data.list
      })
    },
    // 添加
    shopAdd() {
      this.show = true
      this.data()
    },
    onYes() {
      this.$message({
        message:"添加成功",
        type:"success"
      })
      this.data();
    },

    // 编辑
    onEdit(row) {
      this.show = true
      this.role = row
    },
    onedit() {
      this.$message({
        message:"修改成功",
        type:"success"
      })
      this.data();
    },

    // 删除
    onDelete(id) {
      this.axios.post('/category/delete',{id:id}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$confirm('此操作将永久删除该文件，是否继续？','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type:'success',
              message: '删除成功'
            })
          }).catch(() => {
            this.$message({
              type:"info",
              message:'已取消删除'
            })
          })
        }
        this.data()
      })
    },
    // 位置
    // 往上
    onPlus(scope) {
      const {list} = this;
      const tap = document.querySelector(`tbody tr:nth-child(${scope.$index+1})`)
      const Uptap = document.querySelector(`tbody tr:nth-child(${scope.$index})`)
      const { height } = tap.getBoundingClientRect();
      tap.style=`top:-${height}px`
      Uptap.style=`top:${height}px`;
      [list[scope.$index],list[scope.$index-1]] = [list[scope.$index-1],list[scope.$index]]
      setTimeout(() => {
        this.s = false
        this.$nextTick(() => {
          this.s = true
        })
      },1000)
      setTimeout(() => {
        this.loading = true
        this.axios.post('/category/order',{id:scope.row.id,direction:'up'}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message:"位置变化了",
            type:'success'
          })
          console.log(scope.$index);
          this.loading = false
          this.data()
        }
      })
      },1000)

    },
    // 往下
    onReduce(scope) {
      const {list} = this;
      const tap = document.querySelector(`tbody tr:nth-child(${scope.$index+1})`)
      const downtap = document.querySelector(`tbody tr:nth-child(${scope.$index+2})`)
      const { height } = tap.getBoundingClientRect();
      tap.style=`top:${height}px`
      downtap.style=`top:-${height}px`;
      [list[scope.$index],list[scope.$index+1]] = [list[scope.$index+1],list[scope.$index]]
      setTimeout(() => {
        this.s = false
        this.$nextTick(() => {
          this.s = true
        })
      },1000)
      setTimeout(() => {
        this.axios.post('/category/order',{id:scope.row.id,direction:'down'}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message:"位置变化了",
            type:'success'
          })
          this.data()
        }
      })
      },1000)
    }
  },
}
</script>
<style lang="sass">
tbody
  .el-table__row
    position: relative
    top: 0
    transition: 1s
</style>
